<template>
  <div style="background-color: #fcfcfc;text-align: center">
    <div v-if="insertButton" style="display: flex; align-items: center; justify-content: right; padding: 0 0 5px 0;">
      <el-button type="primary" @click="insertHandler">{{ insertButtonText }}</el-button>
    </div>
    <!-- 表格信息 -->
    <el-table ref="elTable"
              border :data="getData"
              row-key="id"
              @selection-change="selectionChangeHandler"
              :cell-style="{paddingLeft:'10px'}" :header-cell-style="{paddingLeft:'10px'}">
      <el-table-column v-if="selection" type="selection" width="55"/>
      <template v-for="(item, index) in columns" :key="index">
        <el-table-column v-if="item.type === 'status'"
                         :prop="item.prop"
                         :label="item.label">
          <template #default="scope">
            <el-tag v-if="scope.row.status === item.status[0]" type="success">{{ scope.row.status }}</el-tag>
            <el-tag v-if="scope.row.status === item.status[1]" type="danger">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-else-if="item.type === 'option'"
                         :prop="item.prop"
                         :label="item.label" :width="item.width">
          <template #default="scope">
            <el-button v-if="item.option.success" type="success" @click="successHandler(scope.row)" >{{ item.option.success.text }}</el-button>
            <el-button v-if="item.option.update" type="warning" @click="updateHandler(scope.row)">修改</el-button>
            <el-button v-if="item.option.delete" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
            <el-button v-if="item.option.reset" type="info" @click="resetHandler(scope.row)">重置</el-button>
            <el-button v-if="item.option.info" type="primary" @click="infoHandler(scope.row)">详细信息</el-button>
          </template>
        </el-table-column>
        <el-table-column v-else
                         :prop="item.prop"
                         :label="item.label"
                         show-overflow-tooltip
        />
      </template>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :hide-on-single-page = 'true'
        v-model:current-page="getCurrent"
        v-model:page-size="getSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="getTotal"
      />
    </div>

  </div>
</template>

<script>

export default {
  name: 'TableMsg',
  props: {
    insertButtonText: { default: '添加' },
    insertButton: { default: false },
    selection: { default: false },
    columns: {},
    data: {},
    page: {},
    request_value: {}
  },
  computed: {
    getTotal: {
      get: function () {
        if (this.request_value && this.request_value.data !== undefined && this.request_value.data.total !== undefined) {
          return this.request_value.data.total
        }
        return 0
      }
    },
    getSize: {
      get: function () {
        if (this.request_value && this.request_value.data !== undefined && this.request_value.data.size !== undefined) {
          return this.request_value.data.size
        }
        return 10
      },
      set: function (size) {
        this.$emit('change-msg', { size: size, current: this.current })
      }
    },
    getCurrent: {
      get: function () {
        if (this.request_value && this.request_value.data !== undefined && this.request_value.data.current !== undefined) {
          return this.request_value.data.current
        }
        return 1
      },
      set: function (current) {
        this.$emit('change-msg', { size: this.getSize, current: current })
      }
    },
    getPage: {
      get: function () {
        return { size: this.getSize, current: this.getCurrent }
      }
    },
    getData: function () {
      console.log('table_data:', this.request_value)
      if (this.request_value && this.request_value.data) {
        if (this.request_value.data.current !== undefined) {
          // 有分页
          return this.request_value.data.records
        } else {
          // 无分页
          return this.request_value.data
        }
      }
      return null
    }
  },
  setup () {
    return {
      defaultPage: {}
    }
  },
  methods: {
    infoHandler (val) {
      this.$emit('info', val)
    },
    updateHandler (val) {
      this.$emit('update', val)
    },
    deleteHandler (val) {
      this.$emit('delete', val)
    },
    resetHandler (val) {
      this.$emit('reset', val)
    },
    insertHandler () {
      this.$emit('insert')
    },
    successHandler (val) {
      this.$emit('success', val)
    },
    selectionChangeHandler (val) {
      this.$emit('selection-change', this.$refs.elTable.getSelectionRows())
    }
  }
}
</script>

<style scoped>
.pagination{
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
